<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta data-th-replace="common/meta :: meta">
  <title>实时人流</title>
  <link rel="stylesheet" data-th-replace="common/Link :: link">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <style>
    .js-route-flag {
      padding: 0;
    }
    .container-fluid{
      padding: 15px;
      width: 540px;
      height: 480px;
    }
    .row {
      margin-right: 0;
      margin-left: 0;
    }
    .stream-head {
      height: 154px;
    }
    .stream-title {
      color: #06A01C;
      text-align: center;
      font-size: 45px;
      line-height: 82px;
    }
    .stream-body {
      height: 100px;
      display: flex;
    }
    .stream-box {
      height: 100%;
      width: 50%;
    }
    .stream-font {
      text-indent: 1rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      color: #ffffff;
      height: 70%;
      background-color: #35B858;
    }
    .stream-desc{
      color: #ffffff;
      height: 30%;
      line-height: 36px;
      font-size: 26px;
      text-align: center;
      background-color: #88D89B;
    }
    .stream-foot {
      height: 226px;
      /*background-color: #c87f0a;*/
      background:url(/images/stream_people_540x480_180.png)no-repeat;
      background-size: cover;
      /*background-size:100px  160px; 宽、高*/
    }
    .box-inline {
      display: inline-block;
      font-size: 54px;
      line-height: 92px;
      padding: 5px;
    }
    .box-inline.show-number{
      margin-top: 0;
      margin-right: 5px;
    }
    .stream-font > .box-inline:first-child{
      padding-top: 0;
      font-size: 62px;
    }
  </style>
</head>
<body class="js-route-flag js-static">
<div class="container-fluid">
  <!-- 年月日 -->
  <div class="row stream-head">
    <div class="stream-title" id="calledDate"></div>
  </div>

  <!-- 实时人数、累计人数 -->
  <div class="row stream-body">
    <div class="stream-box" style="padding-left: 0;padding-right: 0;border-right:3px solid #ffffff;">
      <div class="stream-font">
        <span class="box-inline"><i class="fa fa-users" aria-hidden="true"></i></span>
        <span class="box-inline show-number" id="current">0</span>
      </div>
      <div class="stream-desc">实时人数</div>
    </div>
    <div class="stream-box" style="padding-left: 0;padding-right: 0;border-left:3px solid #ffffff;">
      <div class="stream-font">
        <span class="box-inline"><i class="fa fa-users" aria-hidden="true"></i></span>
        <span class="box-inline show-number" id="total">0</span>
      </div>
      <div class="stream-desc">今日累计人数</div>
    </div>
  </div>

  <!-- 图片 -->
  <div class="row stream-foot">
    <!--<img src="/images/stream_people_540x480_180.png">-->
  </div>
</div>
<script data-main="/js/main.js" src="/js/lib/require.min.js" defer async="true"></script>
</body>
</html>